import React, { Component } from 'react'
import { connect } from 'react-redux'
import {Form, Button, Select} from 'antd';
import notify from "@utils/tip";
const FormItem = Form.Item;
import {
    getWarehouseOrdinaryExpressRegion,
    editWarehouseOrdinaryExpressRegion,
} from '@sagas/warehouse/warehouseManagement'
import {
    getInventoryCommonExpressPlatform
} from '@sagas/warehouse/send'
import CityExpressSelector from '@common/presentational/CityExpressSelector';

@connect(state => ({
    commonExpressPlatform: state.send.commonExpressPlatform,
    warehouseOrdinaryExpressRegion: state.warehouseManagement.warehouseOrdinaryExpressRegion,
}), {
    getWarehouseOrdinaryExpressRegion,
    editWarehouseOrdinaryExpressRegion,
    getInventoryCommonExpressPlatform,

})
class ExpressSetting extends Component {

    constructor(props) {
        super(props)
        this.state = {
            changesCity: null,
            renderReady: false
        }
        this.formRef = React.createRef()

        this.getInfos = this.getInfos.bind(this)
        this.getSelection = this.getSelection.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.submitForm = this.submitForm.bind(this)
        this.handleAddressInfo = this.handleAddressInfo.bind(this)
        this.changeCity = this.changeCity.bind(this)
    }

    componentDidMount() {
        this.getSelection()
        this.getInfos()
    }
    handleAddressInfo = (rule, value, callback) => {
        if (value && !value.length) {
            callback('请选择配送范围')
        } else {
            callback()
        }
    }

    changeCity(value){
        this.setState({
            changesCity: value
        })
        return value
    }

    handleSubmit(values) {
        const { id } = this.props
        this.props.editWarehouseOrdinaryExpressRegion({
            id: Number(id),
            platforms: values.platforms,
            regions: values.addressInfo
        }, () => {
            notify('保存成功', 'success')
            this.getInfos()
        })
    }

    submitForm() {
        this.formRef.current?.submit()
    }

    getInfos() {
        const { id } = this.props
        this.props.getWarehouseOrdinaryExpressRegion({
            id: Number(id),
        }, () => {
            this.setState({
                renderReady: true
            })
        })
    }

    getSelection() {
        this.props.getInventoryCommonExpressPlatform({
            deliverType: 2
        })
    }

    render() {
        const { warehouseOrdinaryExpressRegion, commonExpressPlatform } = this.props
        const { changesCity, renderReady } = this.state
        const cityConfig = changesCity ? changesCity : (warehouseOrdinaryExpressRegion.regions ? warehouseOrdinaryExpressRegion.regions : [])
        const initPlatformIds = (warehouseOrdinaryExpressRegion.platforms || []).map(platform => platform.id)
        return renderReady ? (
            <div>
                <Form
                    ref={this.formRef}
                    name="warehouse-edit"
                    labelCol={{ span: 0 }}
                    wrapperCol={{ span: 24 }}
                    scrollToFirstError={{
                        behavior: actions =>
                            actions.forEach(({ el, top, left }) => {
                                el.scrollTop = top - 100
                                el.scrollLeft = left
                            }),
                    }}
                    onFinish={this.handleSubmit}
                >
                    <div className='mgt-16 mgb-16 ft-14 ft-clr-d'>配送方</div>
                    <FormItem
                        name="platforms"
                        rules={[
                            { required: true, message: '配送方', },
                            { validator: this.handleAddressInfo, },
                        ]}
                        initialValue={initPlatformIds}
                    >
                        <Select
                            mode="multiple"
                            placeholder="请选择配送方"
                        >
                            {(commonExpressPlatform || []).map(platform => (
                                <Select.Option
                                    key={platform.id}
                                    value={platform.id}
                                >
                                    {platform.name}
                                </Select.Option>
                            ))}
                        </Select>
                    </FormItem>
                    <div className='mgt-16 ft-14 ft-clr-d'>配送费</div>
                    <FormItem
                        name="addressInfo"
                        shouldUpdate
                        rules={[
                            { required: true, message: '请设置配送费', },
                            { validator: this.handleAddressInfo, },
                        ]}
                        initialValue={cityConfig}
                        trigger='onsubmit'
                        getValueFromEvent={this.changeCity}
                    >
                        <CityExpressSelector
                            city_config={cityConfig}
                            onsubmit={this.changeCity}
                            canEdit={true}
                        />
                    </FormItem>
                </Form>
                <div className="bilin-web-footer">
                    <Button type="primary" onClick={this.submitForm}>保存</Button>
                </div>
            </div>
        ) : null
    }
}

export default ExpressSetting